$color-info = #909399
$color-success = #67c23a
$color-danger = #f56c6c
$color-warning = #e6a23c
$color-info-bgc = #edf2fc
$color-success-bgc = #f0f9eb
$color-danger-bgc = #fef0f0
$color-warning-bgc = #fdf6ec
.zui-message
  position fixed
  margin 0
  padding 10px 20px
  top 0px
  left 50%
  min-width 250px
  overflow hidden
  z-index 2020
  opacity 0
  display flex
  justify-content center
  align-items center
  transform translate(-50%, -50px)
  transition opacity 0.3s, transform 0.4s, top 0.4s
  background-color $color-info-bgc
  p
    margin 0
    color $color-info
  for $type in info success danger warning
    &.{$type}
      background-color convert('$color-' + $type + '-bgc')
      p
        color convert('$color-' + $type)
  &.in
    transform translate(-50%, 50px)
    opacity 1